<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Data Selfie _ Manage Data</title>
    <style>
    body {
        background-color: #000;
        color: #FFF;
        font-family: "Menlo", monospace;
        line-height: 1.2;
        font-size: 0.8em;
    }

    #data {
        width: calc(100% - 40px);
        padding: 20px;
        height: 350px;
        border: 1px solid #FFF;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #actions {
        margin: 20px 0;
    }

    a,
    a:focus {
        color: #FF00B1;
        padding: 0;
        margin: 2px 0;
        outline: 0;
        text-decoration: none;
    }

    a:hover {
        cursor: pointer;
    }

    button,
    button:focus {
        width: 100px;
        margin: 0 0 30px 0;
        background-color: #FFF;
        border: 1px solid #000;
        padding: 10px 0;
        outline: 0;
    }

    button:hover {
        background-color: #000;
        color: #FFF;
        border: 1px solid #FFF;
        cursor: pointer;
    }

    p {
        padding: 0;
        margin: 5px 0;
        width: 60vw;
        max-width: 600px;
    }

    #status p {
        color: #19E8FF;
    }
    </style>
</head>

<body>
    <div id="data"></div>
    <div id="status">
        <p></p>
    </div>
    <div id="actions">
        <a href="">Import Consumption Data</a>
        <br>
        <input style="display:none;" type="file" id="choose-file" />
        <p>// e.g. if you have used Data Selfie in a different browser or computer before and exported the data from there as a json file</p>
        <button id="import">Import</button>
        <br>
        <a href="">Export Your Consumption Data</a>
        <br>
        <p>// download the data of your consumption (looked at, typed, clicked, liked content) like you see in the box above as a json file</p>
        <button id="backup">Export</button>
        <br>
        <a href="">Save Your User/Prediction Data</a>
        <br>
        <p>// download data like e.g. your personality prediction, health and shopping preferences (this includes more predictions then are shown in "Your Data Selfie") as a json file</p>
        <button id="pred-backup">Save</button>
        <br>
        <a href="">Delete All Your Data</a>
        <br>
        <p>// remove any records from Data Selfie from your computer, i.e. consumption and prediction data; this is final, there is no other place your data is stored</p>
        <button id="delete">Delete</button>
        <br>
    </div>
    <div id="pred-data"></div>
    <script src="../js/manage.js"></script>
</body>

</html>